;(function () {
    // 获取元素
    const todoData = document.querySelector('#ipt');
    const todoList = document.querySelector('#lis');
    const emptyData = document.querySelector('.empty'); 
    const delTodoBtn = document.querySelector('#del_done');
    const allNumber = document.querySelector('.all');
    const doneNumber= document.querySelector('.done');
    let todoItems = document.querySelectorAll('.todo-item');
    const todoDone = document.querySelector('#done')

    // 已完成的任务
    let done=0;

    // 执行方法
    delTodoAllItem();  
    checkTodoItem(); 
    doneTaskNumber();
    allTaskNumber();

    /* 添加任务 */
    todoData.onkeypress = (event) => {
      if (event.which === 13) {
        if (todoData.value.trim() == '')  return alert('请输入任务名称')
        addTodoItem();
        delTodoItem();
        checkTodoItem();
        doneTaskNumber();
        allTaskNumber();
      }      
    }
    
    /* 添加任务项 */
    function addTodoItem(){
        let li = document.createElement('li');
        let input = document.createElement('input');
        let button = document.createElement('button');
        const todoContent = document.createTextNode(todoData.value.trim());
        const btnDelete = document.createTextNode('删除');
        button.appendChild(btnDelete);
        button.classList.add('del-item');
        input.setAttribute('type', 'checkbox')
        li.appendChild(input);
        li.appendChild(todoContent);
        li.appendChild(button);
        li.classList.add('todo-item');
        todoList.insertBefore(li, todoList.children[0]);
        todoData.value = '';
        emptyData.style.display = 'none';
        todoItems = document.querySelectorAll('.todo-item');
        todoDone.checked=false;
    }

    /* 删除任务项 */
    function delTodoItem(){
        const delTodo = document.querySelector('.del-item');
        delTodo.addEventListener('click',()=>{
            if (!confirm('确认要删除该任务吗?')) return
            delTodo.parentNode.remove();
            doneTaskNumber();
            allTaskNumber();
            if (todoItems.length === done) {
              todoDone.checked = true
            }
            if (todoList.children.length!= 1) return
            emptyData.style.display = 'block';
            todoDone.checked = false;
        })
    }

    /* 删除任务列表 */
    function delTodoAllItem(){       
        delTodoBtn.addEventListener('click',()=>{
            if (done <= 0) return alert('请先添加任务')
            if (!confirm('确认要删除已完成任务吗?')) return
            todoItems.forEach(v=>{
                if (v.querySelector('input').checked) {
                    v.remove()
                }
            })            
            doneTaskNumber();
            allTaskNumber();            
            if (todoList.children.length != 1) return
            emptyData.style.display = 'block';
            todoDone.checked = false;
        })
    }

    /* 全选反选 */
    function checkTodoItem(){
        let todoItemsInput = document.querySelectorAll('.todo-item input');
        const todoCheck = document.querySelector('.todo-item input');        
        todoDone.addEventListener('click',()=>{
            if (todoItemsInput.lenth === 0) return
            todoItemsInput.forEach((v) => (v.checked = todoDone.checked))
            doneTaskNumber();  
        })
        if (!todoCheck) return
        todoCheck.addEventListener('click', () => {
            todoItemsInput = document.querySelectorAll('.todo-item input');
            for (let i = 0; i < todoItemsInput.length; i++) {
              todoDone.checked = true
              if (!todoItemsInput[i].checked) {
                todoDone.checked = false;
                break;
              }
            }             
            doneTaskNumber();                     
        })        
    }

    /* 已完成数量 */
    function doneTaskNumber(){
        done = 0;        
        const todoItemsInput = document.querySelectorAll('.todo-item input');
        todoItemsInput.forEach(v=>{
            if(v.checked) done++
        })
        doneNumber.innerText=done
    }

    /* 全部任务数量 */
    function allTaskNumber(){
        todoItems = document.querySelectorAll('.todo-item');
        allNumber.innerText = todoItems.length;
    }
})();
